import React, { Component, lazy, Suspense } from 'react'
import { Layout, Menu, message, Popconfirm } from 'antd'
import { Switch, Route, Link } from 'react-router-dom'
import {
  EditOutlined,
  DiffOutlined,
  HomeOutlined,
  LogoutOutlined,
} from '@ant-design/icons'
import styles from './index.module.scss'
import { removeToken } from 'utils/storage'
import { getUserInfo } from 'api/user'
// import Welcome from 'views/welcome'
// import ArticlePublish from 'views/ArticlePublish'
// import ArticleList from 'views/ArticleList'
const Welcome = lazy(() => import('views/welcome'))
const ArticlePublish = lazy(() => import('views/ArticlePublish'))
const ArticleList = lazy(() => import('views/ArticleList'))

const { Header, Content, Sider } = Layout
export default class Home extends Component {
  state = {
    userInfo: {},
  }
  logout = () => {
    removeToken()
    this.props.history.push('/login')
    message.success('退出成功')
  }
  async componentDidMount() {
    try {
      const { data } = await getUserInfo()
      // console.log(data)
      this.setState({
        userInfo: data,
      })
    } catch (err) {
      message.error('获取用户信息失败')
    }
  }
  // const pathArr = this.props.location.pathname.split('/')
  // const path = pathArr.slice(0, 3).join('/')
  render() {
    const { pathname } = this.props.location
    const path = pathname.startsWith('/home/publish')
      ? '/home/publish'
      : pathname
    return (
      <div className={styles.home}>
        <Layout>
          <Header className="header">
            <div className="logo" />
            <div className="profile">
              <span>{this.state.userInfo.name}</span>
              <span>
                <Popconfirm
                  title="确认退出吗?"
                  onConfirm={this.logout}
                  okText="确认"
                  cancelText="取消"
                >
                  <LogoutOutlined />
                  退出
                </Popconfirm>
              </span>
            </div>
          </Header>
          <Layout>
            <Sider width={200} className="site-layout-background">
              <Menu
                mode="inline"
                theme="dark"
                // defaultSelectedKeys={[this.props.location.pathname]}
                selectedKeys={[path]} // 这样就不用componentDidUpdate
                style={{ height: '100%', borderRight: 0 }}
              >
                <Menu.Item key="/home" icon={<HomeOutlined />}>
                  <Link to="/home">数据概览</Link>
                </Menu.Item>
                <Menu.Item key="/home/list" icon={<DiffOutlined />}>
                  <Link to="/home/list">内容管理</Link>
                </Menu.Item>
                <Menu.Item key="/home/publish" icon={<EditOutlined />}>
                  <Link to="/home/publish">发布文章</Link>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout style={{ padding: '24px', overflow: 'auto' }}>
              <Content
                className="site-layout-background"
                style={{
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
                <Suspense fallback={<div>loading...</div>}>
                  <Switch>
                    <Route exact path="/home" component={Welcome}></Route>
                    <Route path="/home/list" component={ArticleList}></Route>
                    <Route
                      exact
                      path="/home/publish"
                      component={ArticlePublish}
                      key="add"
                    ></Route>
                    <Route
                      path="/home/publish/:id"
                      component={ArticlePublish}
                      key="edit"
                    ></Route>
                  </Switch>
                </Suspense>
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    )
  }
}
